<template>
  <div class="index" ref="index">
    <Nav ref="child" @loginSwitch="loginSwitch"></Nav>
    <div class="mian container mian-container">
      <!--左边的菜单-->
      <div class="dock shadow">
        <nav role="navigation" class="dock-nav">
          <ul class="nav-list">
            <li class="nav-item router-link-exact-active route-active active">
              <a title="推荐 " aria-current="page">推荐 </a>
            </li>
            <li class="nav-item">
              <a title="热门">热门 </a>
            </li>
            <li class="nav-item">
              <a title="关注">关注 </a>
            </li>
            <li class="nav-item">
              <a title="上班摸鱼">上班摸鱼</a>
            </li>
            <li class="nav-item">
              <a title="内推招聘">内推招聘</a>
            </li>
            <li class="nav-item">
              <a title="树洞一下">树洞一下</a>
            </li>
            <li class="nav-item">
              <a title="今天学到了">今天学到了</a>
            </li>
            <li class="nav-item">
              <a title="一图胜千言">一图胜千言</a>
            </li>
            <li class="nav-item">
              <a title="每日算法题">每日算法题</a>
            </li>
            <li class="nav-item">
              <a title="开发工具推荐">开发工具推荐</a>
            </li>
            <li class="nav-item">
              <a>更多话题+</a>
            </li>
            <div class="divider"></div>
          </ul>
        </nav>
      </div>
      <!--中间的沸点-->
      <div class="stream">
        <div class="stream-wrapper">
          <div class="pin-list-view">
            <div class="pin-list-wrap">
              <div class="lt">
                <ul class="list">
                  <li v-for="(item, index) in data" :key="index">
                    <div class="headbox">
                      <div class="author" @mouseleave="closeAuthorInfo(index)">
                        <a class="imgheader" target="_blank" rel="">
                          <img
                            :src="'http://api_devss.wanxikeji.cn/' + item.icon"
                            alt=""
                            class="lazy avatar avatar"
                        /></a>
                        <div class="info-box">
                          <span
                            class="name"
                            @mouseenter="openAuthorInfo(index), getAuthorData()"
                            @mouseleave="leaveaAuthorInfo(index)"
                          >
                            {{ item.nick_name }}
                          </span>
                          <span> 这个逼没什么好说的啊 </span>
                        </div>
                        <!-- 作者信息start -->
                        <div
                          class="author-info"
                          v-show="authorIsShow[index]"
                          @mouseenter="openAuthorInfo(index)"
                          @mouseleave="leaveaAuthorInfo(index)"
                        >
                          <div class="info-tp">
                            <div class="pic">
                              <img
                                :src="
                                  'http://api_devss.wanxikeji.cn/' + item.icon
                                "
                                alt=""
                              />
                            </div>
                            <div class="text">
                              <h5>{{ item.nick_name }}</h5>
                              <p class="des">这个人很懒，没有留下任何东西</p>
                            </div>
                          </div>
                          <div class="info-bt">
                            <div class="follow">
                              <p><span class="num">321</span></p>
                              <p><span>关注</span></p>
                            </div>
                            <div class="Followers">
                              <p><span class="num">111</span></p>
                              <p><span>关注者</span></p>
                            </div>
                            <el-button
                              type="success"
                              plain
                              v-if="!followerArray[index]"
                              @click="follow(item.user_id, index)"
                              >关注</el-button
                            >
                            <el-button
                              type="success"
                              plain
                              v-else
                              @click="cancelFollow(item.user_id, index)"
                              >已关注</el-button
                            >
                          </div>
                        </div>
                        <!-- 作者信息end -->
                      </div>
                      <div class="header-action">
                     
                      </div>
                    </div>
                    <div class="pin-cont">
                      <div>{{ JSON.parse(item.info).content }}</div>
                      <div class="image-box">
                        <div
                          v-for="(item, index) in JSON.parse(item.info).imgs"
                          :key="index"
                          class="article-content-pic"
                        >
                          <img :src="'http://api_devss.wanxikeji.cn/' + item" />
                        </div>
                      </div>
                    </div>
                    <div class="btn">
                      <button class="fabulous">
                        <i class="iconfont icon-dianzan"></i>
                        <span>1297</span>
                      </button>
                      <!--评论按钮-->
                      <button @click="comment_show(index)" class="comment">
                        <i class="iconfont icon-pinglun2"></i>
                        <span>{{ item.comment_num }}</span>
                      </button>
                    </div>
                    <!--评论框-->
                    <div
                      v-show="remarkIsShow[index]"
                      class="article-remark"
                      id="comment"
                    >
                      <!--输入框加发送一级评论-->
                      <div class="remark-input">
                        <div class="remark-input-headpic">
                          <img src="../../assets/img/login/login-1.png" />
                        </div>
                        <div @click.stop="showRemark(index)">
                          <input
                            type="text"
                            placeholder="输入评论..."
                            v-model="fatherInput"
                          />
                          <button
                            class="remark-input-button"
                            @click.stop="remarkCheck(index)"
                          >
                            评论
                          </button>
                        </div>
                      </div>
                      <!--评论列表-->
                      <div class="remark-comment">
                        <div class="remark-comment-list">
                          <!-- 一级评论列表 -->
                          <div
                            class="list-item"
                            v-for="(item1, index1) in commintData"
                            :key="index1"
                          >
                            <!-- 一级评论的头像 -->
                            <div class="item-headpic">
                              <img :src="level1Icon[index1]" />
                            </div>
                            <!-- 一级评论的内容 -->
                            <div class="item-content">
                              <p
                                class="item-content-nickName"
                                @click="turnPerson(index1)"
                              >
                                {{ item1.nick_name }}
                              </p>
                              <p class="item-content-info">
                                {{ item1.comment_info }}
                              </p>
                              <div style="margin-bottom: 10px">
                                <p
                                  class="item-content-remark iconfont"
                                  @click.stop="childRemarkShow(index1)"
                                >
                                  &#xe684;<span>回复</span>
                                </p>
                                <p class="item-content-good iconfont">
                                  &#xe639;
                                </p>
                              </div>
                              <!-- 二级评论列表 -->
                              <div
                                class="list-item list-secondItem"
                                v-for="(item2, index2) in commintData[index1]
                                  .child"
                                :key="index2"
                              >
                                <div class="item-headpic secondItem-headpic">
                                  <img
                                    :src="
                                      'http://api_devss.wanxikeji.cn/' +
                                      item2.icon
                                    "
                                    @click="turnPerson2(item2.user_id)"
                                  />
                                </div>
                                <div class="item-content">
                                  <p
                                    class="item-content-nickName"
                                    @click="turnPerson2(item2.user_id)"
                                  >
                                    {{ item2.nick_name }}
                                  </p>
                                  <p class="item-content-info">
                                    {{ item2.comment_info }}
                                  </p>
                                  <div style="margin-bottom: 10px">
                                    <p
                                      class="item-content-remark iconfont"
                                      @click.stop="childRemarkShow(index1)"
                                    >
                                      &#xe684;<span>回复</span>
                                    </p>
                                    <p class="item-content-good iconfont">
                                      &#xe639;
                                    </p>
                                  </div>
                                </div>
                              </div>
                              <!-- 二级评论的评论 -->
                              <div
                                v-if="ischildRemark[index1]"
                                class="childRemark"
                              >
                                <input
                                  type="text"
                                  placeholder="请回复"
                                  v-model="childInput"
                                />
                                <button
                                  class="ischildHigh"
                                  @click="childRemark(index1, index)"
                                >
                                  评论
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--右边的个人信息-->
      <div class="pin__side sidebar">
        <div class="profile-box shadow">
          <div class="profile">
            <a target="_blank" rel="">
              <img
               :src="'http://api_devss.wanxikeji.cn/' + getVuexIcon"
                alt="Yxa的头像"
                class="lazy avatar avatar"
            /></a>
            <div class="user-info">
              <a target="_blank" rel="" class="username ellipsis"> {{getVuexnickName}} </a>
              <div class="position ellipsis">嘿嘿嘿 @ gdsgfd</div>
            </div>
          </div>
          <ul class="stat-list">
            <a target="_blank" rel="" class="item"
              ><div class="title">沸点</div>
              <div class="count">{{data_info.pins_all}}</div></a
            >
            <a target="_blank" rel="" class="item"
              ><div class="title">关注</div>
              <div class="count">{{data_info.concern}}</div></a
            >
            <a target="_blank" rel="" class="item"
              ><div class="title">关注者</div>
              <div class="count">{{data_info.fans}}</div></a
            >
          </ul>
        </div>
      </div>
    </div>
    <!-- 登录组件 -->
    <div class="loginImport" v-show="getVuxToLogin">
      <Login @loginSwitch="loginSwitch"></Login>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/nav.vue"
import Login from "../../components/login"
export default {
  data() {
    return {
      article_id: 0,
      father_id: 0, //文章的id
      commintData: [], //评论的数据
      commintTime: [], //评论的时间
      ischildRemark: [], //判断二级评论的评论按钮是否显示
      myIcon: "", //登录账号（本人）的头像
      level1Icon: [], //一级评论的头像
      level2Icon: [], //二级评论的头像
      remark_stat: false,
      ischildHigh: false, //判断二级评论的评论按钮是否高亮
      ischildCheck: true,
      isfatherHigh: false, //判断一级评论的评论按钮是否高亮
      fatherInput: "", //一级评论的输入框
      isRemark: true, //判断一级评论的评论按钮是否可以点击
      pins_info: "",
      switchToggle: [true, false], // 排序文字样式切换
      toLogin: false, // 登录组件切换
      token: null, // 记录token
      data: [], // 列表数据
      isInAuthorInfo: [
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
      ], // 鼠标是否进入作者信息栏
      authorIsShow: [
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
      ], // 作者信息是否展示
      remarkIsShow: [
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
      ],
      toTopIsShow: false, // 回到顶部按钮是否显示
      el: null, // 页面最大的容器
      windowHeight: 0, // 视窗高度
      page: 1, // 页码
      data_info: {},
      concernList: [], // 用户关注列表
      followerArray: [], // 关注按钮HTML内容
    };
  },
  components: {
    Nav, Login
  },
  mounted() {
    // 获取初始数据
    this.getListData();
    this.token = this.$store.state.token;
    // 滚动条监听
    window.addEventListener("scroll", this.Scroll);
    // 获取页面最大的容器
    this.el = this.$refs.index;
    // 获取视窗高度
    this.windowHeight = window.innerHeight;
    this.$refs.child.bul = 2;
    this.getData();
    
    
  },
  methods: {
    showRemark(index) {
      console.log(index);
    },
    closeRemark() {
      this.isFocus = false;
      for (let i = 0; i < this.ischildRemark.length; i++) {
        this.ischildRemark[i] = false;
      }

      this.$forceUpdate();
    },
    //发送的是一级评论
    remarkCheck(index) {
      this.axios({
        method: "post",
        url: "api/addComment",
        data: {
          token: this.token,
          comment_info: this.fatherInput,
          article_id: this.data[index].article_id,
        },
      }).then((res) => {
        console.log(res, "评论成功");
        this.axios({
          method: "post",
          url: "api/articleInfo",
          data: {
            article_id: this.data[index].article_id,
          },
        }).then((res) => {
          this.commintData = res.data.data.data;
          // 获取所有一级评论的头像地址
          for (let i = 0; i < this.commintData.length; i++) {
            this.level1Icon[i] =
              "http://api_devss.wanxikeji.cn/" + this.commintData[i].icon;
            console.log(this.level1Icon[i]);
          }
        });
      });

      this.isFocus = false;
      this.fatherInput = "";
      this.$forceUpdate();
    },
    // 显示二级评论框
    childRemarkShow(index) {
      this.childInput = "";
      if (this.ischildRemark[index] == true) {
        this.ischildRemark[index] = false;
      } else {
        for (let i = 0; i < this.ischildRemark.length; i++) {
          this.ischildRemark[i] = false;
        }
        this.ischildRemark[index] = true;
      }
      this.$forceUpdate();
    },
    // 发送二级评论
    childRemark(index1, index) {
      // console.log(index);一级评论的下标
      this.axios({
        method: "post",
        url: "api/addComment",
        data: {
          token: this.token,
          comment_info: this.childInput,
          article_id: this.data[index].article_id,
          father_id: this.commintData[index1].comment_id,
        },
      }).then(() => {
        this.axios({
          method: "post",
          url: "api/articleInfo",
          data: {
            article_id: this.data[index].article_id,
          },
        }).then((res) => {
          this.commintData = res.data.data.data;
        });
      });

      // 关闭所有二级评论的窗口
      for (let i = 0; i < this.ischildRemark.length; i++) {
        this.ischildRemark[i] = false;
      }
      this.$forceUpdate();
    },
    // 点击名字进入该用户的主页
    turnPerson(index) {
      let user_id = this.commintData[index].user_id;
      this.$router.push({ path: `/user/${user_id}` });
    },
    turnPerson2(user_id) {
      this.$router.push({ path: `/user/${user_id}` });
    },
    // 关注用户
      follow (user_id, index) {
      this.followerArray[index] = true
      this.$forceUpdate()
      this.axios({
        url: "api/concern",
        method: "post",
        data: {token: this.$store.state.token, be_concern_user_id: user_id}
      })
      .then( res => {
        console.log(res)
      })
      .catch( err => {
        console.log(err)
      })
    },
    // 取消关注
   cancelFollow(user_id, index) {
      console.log(this.followerArray[index])
      this.followerArray[index] = false
      this.$forceUpdate()
      this.axios({
        url: "api/concernDel",
        method: "post",
        data: {token: this.$store.state.token, be_concern_user_id: user_id}
      })
      .then( res => {
        console.log(res)
       
      })
      .catch( err => {
        console.log(err)
      })
    },
    // 获取关注列表
   getConcerList() {
      this.axios({
        url: "api/concernList",
        method: "post",
        data: {user_id: this.$store.state.userID}
      })
      .then( res => {
        console.log(res.data.data.my_concern)
        if (this.page === 1) this.concernList = res.data.data.my_concern
        else this.concernList.push(res.data.data.my_concern)
        // 关注列表匹配
        this.concernListMatch()
      })
      .catch( err => {
        console.log(err)
      })
    },
    // 关注列表匹配
    concernListMatch() {
      for (let i = 0, len = this.data.length; i < len; i++) {
        this.followerArray[i] = false;
        for (let j = 0, len2 = this.concernList[0].length; j < len2; j++) {
          if (
            this.data[i].user_id === this.concernList[0][j].be_concern_user_id
          ) {
            this.followerArray[i] = true;
          }
        }
      }
    },
    //根据文章的id获取文章信息
    comment_show(index) {
      if (this.remarkIsShow[index] == false) {
        this.remarkIsShow[index] = true;
      } else {
        this.remarkIsShow[index] = false;
      }
      this.axios({
        method: "post",
        url: "api/articleInfo",
        data: {
          article_id: this.data[index].article_id,
        },
      }).then((res) => {
        console.log(res.data.data.data, "获取文章评论信息");
        // 将所有一级评论存取 commintData
        this.commintData = res.data.data.data;
        for (let i = 0; i < this.commintData.length; i++) {
          this.level1Icon[i] =
            "http://api_devss.wanxikeji.cn/" + this.commintData[i].icon;
        }
        console.log(this.commintData);
      });
      this.$forceUpdate();
    },
    // 获取作者信息，展示栏显示
    getAuthorData() {},
    // 打开作则信息展示
    openAuthorInfo(index) {
      this.isInAuthorInfo[index] = true;
      this.authorIsShow[index] = true;
      this.$forceUpdate();
    },
    // 移出作者信息框
    leaveaAuthorInfo(index) {
      this.isInAuthorInfo[index] = false;
    },
    // 关闭作者信息展示
    closeAuthorInfo(index) {
      setTimeout(() => {
        if (this.isInAuthorInfo[index]) return;
        else {
          this.authorIsShow[index] = false;
          this.$forceUpdate();
        }
      }, 500);
    },
    // 获取列表信息
    getListData() {
      this.axios({
        method: "post",
        url: "api/articleList",
        data: {
          page: this.page, 
          size: 10, 
          type: 2
        }
      })
      .then( res => {
        if (this.page === 1)  this.data = res.data.data.data
        else 
        {
          this.data = [...this.data, ...res.data.data.data]
        }
        // 获取关注列表
        this.getConcerList()
      })
      .catch( err => {
        console.log(err)
      })
    },
    // 接受登录组件传过来的token
    getToken(token) {
      this.token = token;
    },
    // 跳转文章内容
    // 回到顶部
    toTop() {
      document.documentElement.scrollTop = 0;
    },
    // 滚动条函数
    Scroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        //写后台加载数据的函数
        this.page++;
        this.getListData();
        this.getConcerList();
        this.concernListMatch();
        
      }
    },
    getData() {
      this.axios
        .post("http://api_devss.wanxikeji.cn/api/userAllInfo", {
          token: this.$store.state.token
        })
        .then((response) => {
          
          this.data_info = response.data.data
          console.log(this.data_info.pins_all)
        });
    },
    // 登录组件切换
    loginSwitch() {
      this.$store.commit("loginSwitch")
    },
  },
  computed: {
    // 获取token
    getVuxToken() {
      return this.$store.state.token
    },
    // 获取登录状态
    getVuxToLogin() {
      return this.$store.state.toLogin
    },
    getVuexIcon() {
      return this.$store.state.icon
    },
     getVuexnickName() {
      return this.$store.state.nickName
    },
 
  },
};
</script>


<style lang="scss" scoped>
.el-button{
  padding: 10px 15px;
  margin-right: 2px;
}
.subscribe-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.remark-comment-list {
  width: 550px;
}
.list-item {
  width: 85%;
  margin-bottom: 16px;
  display: flex;
  box-sizing: border-box;
}
.item-headpic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 10px;
  cursor: pointer;
}
.item-headpic img {
  width: 100%;
  height: 100%;
}
.item-content {
  width: 100%;
  border-bottom: 1px solid rgb(225, 225, 225);
}
.item-content-nickName {
  font-size: 13px;
  height: 16px;
  line-height: 16px;
  cursor: pointer;
}
.item-content-info {
  font-size: 13px;
  height: 16px;
  line-height: 16px;
  margin: 10px 0;
}
.item-content-time {
  font-size: 13px;
  color: rgb(175, 175, 175);
  display: inline-block;
}
.item-content-good {
  margin-right: 30px;
}
.item-content .iconfont {
  display: inline-block;
  font-size: 17px;
  cursor: pointer;
  float: right;
  color: rgb(175, 175, 175);
}
.item-content .iconfont span {
  font-size: 13px;
  color: rgb(175, 175, 175);
  margin-left: 10px;
}
.item-content .iconfont:hover {
  opacity: 0.7;
}
.childRemark {
  width: 100%;
  background-color: rgb(250, 251, 252);
  margin-bottom: 10px;
  overflow: hidden;
}
.childRemark input {
  width: 95%;
  height: 38px;
  border: 1px solid skyblue;
  border-radius: 5px;
  display: block;
  margin: 15px auto;
  box-sizing: border-box;
  padding-left: 20px;
  outline: none;
}
.childRemark button {
  width: 60px;
  height: 30px;
  font-size: 15px;
  color: white;
  outline: none;
  border: none;
  border-radius: 2px;
  float: right;
  margin-right: 14px;
  margin-bottom: 10px;
  background-color: rgb(2, 127, 255);
}
.childRemark1 {
  background-color: rgb(2, 127, 255);
}
.childRemark2 {
  background-color: rgb(151, 201, 253);
}
.list-secondItem {
  background-color: rgb(250, 251, 252);
  padding-top: 10px;
  margin: 0;
}
.secondItem-headpic {
  margin-left: 10px;
}
.remark-input input:focus {
  border: 1px solid rgb(2, 127, 255);
}
.remark-input-button {
  width: 60px;
  height: 30px;
  border: none;
  border-radius: 2px;
  font-size: 15px;
  outline: none;
  float: right;
  margin: 0 40px 20px 0;
  cursor: pointer;
  color: white;
  background-color: rgb(2, 127, 255);
}
.remark-input-button1 {
}
.remark-input-button2 {
  background-color: rgb(151, 201, 253);
}
.article-remark {
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid rgb(235, 235, 235);
  margin: 0 auto;
}
.remark-input {
  width: 100%;
  /* height: 60px; */
  margin: 0 auto 16px;
  background-color: rgb(250, 251, 252);
  overflow: hidden;
}
.remark-input-headpic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  margin: 15px;
  display: inline-block;
  float: left;
  cursor: pointer;
}
.remark-input-headpic img {
  width: 100%;
  height: 100%;
}
.remark-input input {
  width: 80%;
  height: 36px;
  margin: 12px 0;
  border-radius: 5px;
  border: 1px solid rgb(225, 225, 225);
  box-sizing: border-box;
  padding-left: 15px;
  outline: none;
}
.remark-input-headpic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  margin: 15px;
  display: inline-block;
  float: left;
  cursor: pointer;
}
.remark-input-headpic img {
  width: 100%;
  height: 100%;
}
.article-content-pic {
  width: 50%;
}
.article-content-pic img {
  width: 100%;
  padding: 2px;
}
.image-box {
  display: flex;
  flex-wrap: wrap;
}
.pin-cont {
  max-width: 350px;
  margin: 0 auto;
  margin-bottom: 10px;
}
.header-action {
  display: flex;
}
.follow-button {
  margin: 0 0 0 auto;
  padding: 0;
  width: 55px;
  height: 26px;
  font-size: 13px;
  border-color: #6cbd45;
  color: #6cbd45;
  border: 1px solid;
}

.headbox {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.info-box {
  display: flex;
  flex-direction: column;
  line-height: 20px;
}
.author {
  display: flex;
}
.imgheader {
  display: flex;
  margin-right: 1rem;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid #fff;
  overflow: hidden;
  margin-top: -5px;
}
.imgheader img {
  width: 100%;
  height: 100%;
}
.lt > .list li {
  position: relative;
  padding: 10px 0;
  border-bottom: 1px solid #f4f4f4;
  cursor: pointer;
  background-color: white;
  margin-bottom: 10px;
}

.lt > .list li:hover {
  background-color: #fcfcfc;
}

.lt > .list li p {
  color: rgb(65, 63, 63);
}

.lt > .list li .author {
  font-size: 12px;
  color: #ccc;
  transition: all 0.3s;

  span.divider {
    margin: 0 5px;
  }

  span.name:hover,
  span.tag:hover {
    color: #007fff;
  }
}
.name {
  font-size: 15px;
  font-weight: 600;
  color: #2e3135;
}

.lt > .list li {
  .author-info {
    position: absolute;
    bottom: 100%;
    left: -70px;
    box-sizing: border-box;
    width: 267px;
    height: 160px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 20px 0 #ccc;
    z-index: 10;

    &::after {
      display: block;
      content: "";
      position: absolute;
      bottom: -20px;
      left: 25%;
      border: 10px solid transparent;
      border-top-color: #fff;
    }

    .info-tp {
      display: flex;

      .pic {
        width: 60px;
        height: 60px;
        margin-right: 12px;
        border-radius: 50%;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      h5 {
        margin: 0;
        color: #333;
        font-size: 15px;
      }

      .des {
        max-width: 155px;
        margin-top: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
      }
    }

    .info-bt {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 20px;

      span {
        font-size: 13px;
        color: #8f969c;

        &.num {
          font-weight: bold;
          font-size: 15px;
          color: #17181a;
        }
      }
    }
  }
}

.lt > .list li h3:hover {
  text-decoration: underline;
}
.btn {
  display: flex;
  width: 100%;
  justify-content: space-around;
  border-top: 1px solid #ebebeb;
  padding-top: 5px;
}
.lt > .list li .btn button {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  color: #ccc;
  background-color: #fff;
  border: 1px solid #f4f4f4;
  cursor: pointer;
  transition: all 0.3s;
}

.lt > .list li .btn button + button {
  border-left: none;
}

.lt > .list li .btn button:hover {
  background-color: #f4f5f5;
}

.lt > .list li h3 {
  margin: 10px 0 15px;
}

.stream {
  width: 570px;
  max-width: 100%;
  flex-shrink: 0;
}
.sidebar {
  width: 248px;
  flex: 1;
  max-width: 248px;
}
.profile-box .stat-list .item .title {
  font-size: 13px;
  color: #8a9aa9;
  margin-bottom: 0.5rem;
}
.profile-box .stat-list .item .count {
  font-size: 15px;
  font-weight: 600;
  color: #2e3135;
}
.profile-box .stat-list {
  flex: 1 1 auto;
  display: flex;
  margin: 0;
  list-style: none;
  text-align: center;
  padding: 16.5px 0;
}
.profile-box .stat-list .item:not(:last-child) {
  border-right: 1px solid rgba(92, 96, 102, 0.1);
}
.profile-box .stat-list .item {
  flex: 1 1 33.333%;
  max-height: 2.833rem;
  line-height: 1;
}
.profile-box {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0.2rem;
  margin-bottom: 8px;
  font-size: 13px;
}
.profile-box .profile {
  display: flex;
  padding: 16px;
  height: 5rem;
  max-height: 92px;
  border-bottom: 1px solid rgba(92, 96, 102, 0.1);
}
.profile-box .profile .avatar {
  flex: 0 0 auto;
  margin-right: 1rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #fff;
}
.profile-box .profile .user-info {
  position: relative;
  margin: 1rem 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.username {
  color: #17181a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
}
.mian {
  margin-top: 20px;
  margin-bottom: 6rem;
  display: flex;
  align-items: flex-start;
}
.dock {
  margin-right: 15px;
  width: 112px;
}

.dock-nav {
  max-width: 9.33rem;
  border-radius: 0.2rem;
  background-color: #fff;
  position: fixed;

  width: 9.33rem;
  transition: all 0.2s linear;
}
ul {
  list-style-type: disc;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  padding-inline-end: 20px;
}
.nav-list {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
}
.nav-list .nav-item.active {
  background-color: #007fff;
  color: #fff;
}
.nav-list .nav-item {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 2.58rem;
  line-height: 2.58rem;
  text-align: center;
  font-size: 13px;
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s, color 0.2s;
  color: #909090;
}
.nav-item {
  position: relative;
  cursor: pointer;
}
li {
  list-style: none;
}
.nav-list .nav-item.active > a {
  color: #fff;
}
.nav-item > a:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.loginImport {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 999;
}
</style>